<template>
  <div class="common-layout">
    <el-container>
      <el-header style="background: white;">
        <div style="width: 200px;; margin-left: -20px; float: left; color: white; background: #009688;">
          <el-icon  style="font-size: 30px; float: left;margin-top: 15px; margin-left: 20px;">
            <component :is="HomeFilled"></component>
          </el-icon>
          <div>
            {{titleText}}
          </div>
        </div>
        <div style="width: 89.2%;">
          <el-icon  style="font-size: 30px; float: left;margin-top: 15px; color:#009688;" @click="showMenu">
            <component :is="titleIcon"></component>
          </el-icon>
          <div style="float: right; width: 400px; margin-right: -250px;">
            <el-menu
              :default-active="activeIndex"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
            >
              <el-sub-menu index="1">
                <template #title>
                  <el-icon  style="font-size: 30px;margin-top: 10px; color:#009688;">
                    <component :is="BellFilled"></component>
                  </el-icon>
                  <text style="color: red; font-size:20px;">{{msgCount}}</text>
                </template>
                <el-menu-item index="1-1">XXX信息……</el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="2">
                <template #title>{{user}}</template>
                <el-menu-item index="-1">修改密码</el-menu-item>
              </el-sub-menu>
              <el-menu-item index="3">退出</el-menu-item>
            </el-menu>
          </div>
        </div>
      </el-header>
      <el-container>
        <!-- 左侧菜单 -->
      <el-aside width="200px" style="height:850px;" v-if="menuShow">
        <!--侧边栏-->
        <el-row class="tac">
          <navigation-item :data="this.List"></navigation-item>
        </el-row>
      </el-aside>
        <el-main>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item v-for="item in levelList" :key="item.path" style="border: 1px solid red;height: 35px;width:80px;">
              <text style="margin-bottom: 10px;">{{item.meta.title}}</text>
              <el-icon  style="font-size: 15px;margin-right: -15px;">
                <component :is="CloseBold"></component>
              </el-icon>
            </el-breadcrumb-item>
          </el-breadcrumb>
          <router-view> </router-view> <!-- 组件的出口 -->
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import navigationItem  from '../components/menu/navigationItem.vue'
export default {
  name: 'zb-login',
  components:{
    navigationItem 
  },
  data() {
    return {
      HomeFilled: 'HomeFilled',
      titleText: '51妆备',
      titleIcon: 'Fold',
      menuShow: true,
      levelList: null,
      user: '超级管理员',
      seen: false,
      ArrowDownBold: 'ArrowDownBold',
      BellFilled: 'BellFilled',
      CloseBold: 'CloseBold',
      msgCount: 1,
      List: [
        {
          "id": 1,
          "name": "首页",
          "path": "HelloWorld",
          "icon": "Apple"
        },
        {
          "id": 1,
          "name": "客户管理",
          "path": "",
          "icon": "Apple",
          "children": [
            {
              "id": 1,
              "name": "客户列表",
              "path": "ZbCustomer",
              "icon": "Apple",
            }
          ]
        },
        {
          "id": 2,
          "name": "系统基础配置",
          "path": "",
          "icon": "Apple",
          "children": [
            {
              "id": 1,
              "name": "代码生成器",
              "path": "ZbGenerator",
              "icon": ""
            },
            {
              "id": 2,
              "name": "组织机构",
              "path": "",
              "icon": "",
              "children": [
                {
                  "id": 2,
                  "name": "组织详情",
                  "path": "",
                  "icon": "",
                }
              ]
            },
            {
              "id": 2,
              "name": "人员类别",
              "children": [
                {
                  "id": 3,
                  "name": "呵呵",
                  "path": "",
                  "icon": "",
                  "children": [
                    {
                      "id": 4,
                      "name": "哈哈哈",
                      "path": "",
                      "icon": ""
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  },
   watch: {
    $route() {
      this.getBreadcrumb()
    }
  },
  mounted() {

  },
  methods: {
    getBreadcrumb() {
      let matched = this.$route.matched.filter(item => item.name);
      this.levelList = matched;
    },
    showMenu() {
      if (this.titleIcon == 'Fold') {
        this.titleIcon = 'Expand';
        this.menuShow = false;
      } else {
        this.titleIcon = 'Fold';
        this.menuShow = true;
      }
    },
    enter() {
      this.seen = true;
      this.ArrowDownBold = 'ArrowUpBold';
    },
    leave() {
      this.seen = false;
      this.ArrowDownBold = 'ArrowDownBold';
    }
  },
  created() {
    this.getBreadcrumb()
  }
};
</script>
<style>
.common-layout .el-header,
.common-layout .el-footer {
  background-color: #b3c0d1;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 60px;
}
.common-layout .el-footer {
  line-height: 60px;
}

.common-layout .el-aside {
  background-color: #d3dce6;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 900px;
}

.common-layout .el-main {
  background-color: #e9eef3;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 160px;
}

.common-layout > .el-container {
  margin-bottom: 40px;
}

.common-layout .el-container:nth-child(5) .el-aside,
.common-layout .el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.common-layout .el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.el-col-24{
  width: 200px;
}
</style>